<template>
	<view class="nav">
		<view class="item" @click="skipToShouye()">
			<image src="../../../static/首页.png" class="pic" style="margin-left: 18rpx;"></image>
			<span class="word">首页</span>
		</view>
		<view class="item" >
			<image src="../../../static/点单.png" class="pic"></image>
			<span class="word">点单</span>
		</view>
		<view class="item" @click="skipToMyOrder()">
			<image src="../../../static/订单.png" class="pic"></image>
			<span class="word">订单</span>
		</view>
		<view class="item" @click="skipToMine()">
			<image src="../../../static/我的.png" class="pic"></image>
			<span class="word">我的</span>
		</view>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				// Mine:this.skipToMine,
				// Shouye:this.skipToShouye,
				// MyOrder:this.skipToMyOrder
				status:"shouye"
			}
		},
		onLoad() {
		
		},
		// props:["skipToMine","skipToShouye","skipToMyOrder"],
		methods: {
			skipToMine() {
				// uni.navigateTo({
				// 	url:"/pages/index/index1/index1",
				// 	animationType:"pop-in",
				// 	animationDuration:300
				// });
				this.status="mine";
				
			},
			skipToShouye() {
				// uni.navigateTo({
				// 	url:"/pages/index/index1/index1",
				// 	animationType:"pop-in",
				// 	animationDuration:300
				// });
				this.status="shouye"
			},
			skipToMyOrder() {
				// uni.navigateTo({
				// 	url:"/pages/index/index1/index1",
				// 	animationType:"pop-in",
				// 	animationDuration:300
				// });
				this.status="myorder"
			},
		}
	}
</script>

<style >
	.nav{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		border-top: 2rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #d0d0d0;
	}
	.word{
		font-size: 25rpx;
	}
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		width: 65rpx;
		height:95rpx;
		padding: 5rpx;
	}
	.pic{
		width: 60rpx;
		height: 80rpx;
	}
</style>
